<template>
    <div class="apply settle-sub-box">
        <div class="fill-in">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                     :label-position="'top'" class="form clearfix">
                <!--                <div class="title">基本信息</div>-->
                <el-form-item label="" prop="headPortrait" class="avatar">
                    <div class="text-center">
                        <div class="upload">
                            <el-image
                                fit="contain"
                                v-if="!imgData||(imgData&&!imgData.url)"
                                src="../../static/images/avatar-empty.png"
                                @click="chooseImage('positive')"
                                class="uploadimg">
                                <div slot="placeholder" class="image-slot">
                                    <i class="el-icon-loading"></i>
                                </div>
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <el-image
                                fit="cover"
                                v-if="imgData&&imgData.url"
                                :src="'/_api' + imgData.url"
                                class="img-box"
                                @load="loadImage()"
                                @click="chooseImage('positive')">
                                <div slot="placeholder" class="image-slot">
                                    <i class="el-icon-loading"></i>
                                </div>
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <!--                        <span v-if="ruleForm.headPortrait" @click="clearImg('positive')" class="iconClear"><i-->
                            <!--                            class="el-icon-error"></i></span>-->
                        </div>
                        <p class="upload-tips">
                            <span v-if="!imgData||(imgData&&!imgData.url)">请拍摄完整人脸照片，便于刷脸通行</span>
                            <span v-if="imgData&&imgData.url">点击更换头像</span>
                        </p>
                    </div>
                    <el-input v-model="ruleForm.headPortrait" type="hidden" readOnly></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input placeholder="请输入姓名" v-model="ruleForm.name" @blur="$method.inputBlur()"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="cardId">
                    <el-input placeholder="请输入身份证号或者拍照识别" v-model="ruleForm.cardId" @blur="$method.inputBlur()">
                        <el-button slot="append" icon="el-icon-camera-solid"
                                   @click="$router.push($route.path+'/uploadCardId')"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone" class="is-required">
                    <el-input placeholder="请输入手机号码" v-model="ruleForm.phone" type="number"
                              @blur="$method.inputBlur()"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-button type="primary" class="submit" @click="submitForm('ruleForm')">提交</el-button>
        <form name="imgForm" style="display:none;"></form>
        <router-view @updateInfo="updateInfo"></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            let validatePhone = (rule, value, callback) => {
                if (!/^1\d{10}$/.test(value)) {
                    callback(new Error('手机号格式错误'))
                } else {
                    callback()
                }
            }
            return {
                ruleForm: {
                    name: '',
                    cardType: '1',
                    cardId: '',
                    phone: '',
                    headPortrait: ''
                },
                imgData: null,
                rules: {
                    name: [
                        {required: true, message: '请填写姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请填写手机号', trigger: 'blur'},
                        {validator: validatePhone, trigger: 'blur'}
                    ],
                    cardId: [
                        {required: true, message: '请填写身份证号', trigger: 'blur'}
                    ],
                    headPortrait: [
                        {required: true, message: '请上传头像', trigger: 'change'}
                    ]
                },
                role: '', // 身份类型
                idCardMessage: {}, // 身份证信息
                goPath: '' // 跳转页面
            }
        },
        updated() {
            if (this.idCardMessage.idnumber) this.ruleForm.cardId = this.idCardMessage.idnumber
            if (this.idCardMessage.name) this.ruleForm.name = this.idCardMessage.name
            if (this.imgData) {
                if (this.imgData.path && !this.imgData.url) {
                    this.imgData.url = this.imgData.path
                }
            }
            this.ruleForm.headPortrait = this.imgData ? this.imgData.url : ''
        },
        mounted() {
            this.$emit('footerHide')
            this.$method.wxConfig()
            this.goPath = this.$route.query.go
        },
        methods: {
            updateInfo(name, info) {
                this[name] = info
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$method.showToast(obj[Object.keys(obj)[0]][0].message)
                        return false
                    }
                })
            },
            submitForm(formName) {
                this.validate('ruleForm', () => {
                    this.submit()
                })
            },
            submit() {
                let _this = this,
                    params = {
                        idCard: this.ruleForm.cardId, // 证件号
                        name: this.ruleForm.name, // 姓名
                        phone: this.ruleForm.phone, // 手机号
                        headPortrait: this.imgData && this.imgData.uuid// 头像
                    }
                this.$http.post('/userRegister', params).then(result => {
                    if (result.success) {
                        if (_this.goPath) {
                            _this.$router.replace(_this.goPath)
                        } else {
                            _this.$method.historyBack()
                        }
                        _this.$refs.ruleForm.resetFields()
                    }
                })
            },

            // 图片加载完成刷新放大器
            loadImage() {
                this.$nextTick(() => {
                    this.$previewRefresh()
                })
            },
            // 删除图片
            clearImg(type) {
                this.imgData = null
            },

            // 微信图片上传
            chooseImage(type) {
                let _this = this
                this.$wechat.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['compressed'], // 可以指定是original 原图还是compressed 压缩图，默认二者都有
                    sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        _this.getLocalImgData(res.localIds[0], type)
                        _this.$vux.loading.show()
                    }
                })
            },
            // 获取上传的微信图片到本地
            getLocalImgData(localId, type) {
                let _this = this
                this.$wechat.getLocalImgData({
                    localId: localId, // 图片的本地ID
                    success: (res) => {
                        var localData = res.localData // localData是图片的base64数据，可以用img标签显示
                        if (localData.indexOf('data:image') !== 0) {
                            localData = 'data:image/jpg;base64,' + localData
                        }
                        let form = document.avatarForm,
                            formData = new FormData(form),
                            fileName = new Date().getTime() + '.jpg'
                        formData.append('file', _this.$filter.dataURLtoFile(localData, fileName))
                        _this.fileUpload(formData, type)
                    },
                    fail: function () {
                        _this.$vux.loading.hide()
                    }
                })
            },
            // 文件上传
            fileUpload(formData, type) {
                this.$vux.loading.show()
                this.$nextTick(() => {
                    this.$http.post('/file/upload?type=report',
                        formData,
                        {headers: {'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryU9T56J8eIqTBGRQH'}}
                    ).then(result => {
                        if (result.success) {
                            this.$vux.loading.hide()
                            this.imgData = result.data
                            this.$nextTick(() => {
                                this.$previewRefresh()
                            })
                        }
                    }).catch(() => {
                        this.$vux.loading.hide()
                    })
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .apply {
        background-color: #fff;
        padding: .3rem;

        .title {
            line-height: .76rem;
            padding: 0 .2rem;
            color: #999;

            &.mt {
                margin-top: -.15rem;
            }

            .rt {
                float: right;
            }

            .link {
                color: #028CFC;
            }
        }
    }

    .form {
        /deep/ .el-form-item {
            font-size: .28rem;
            /*border-bottom: 1px solid #EBEBEB;*/
            background-color: #fff;
            margin-bottom: .15rem;
            /*padding: .1rem 0;*/

            .el-form-item__label {
                color: #333;
                padding: 0 0 0 .2rem;
                font-size: .28rem;
                line-height: .48rem;
            }

            .el-form-item__content {
                position: relative;
                font-size: .28rem;
                line-height: .5rem;
                margin-top: .1rem;
                border: 1px solid #EBEBEB;
                border-radius: .05rem;
            }

            .el-input {
                font-size: .28rem;

                input {
                    padding: 0 .2rem;
                    border: 0 none;
                    height: .68rem;
                    line-height: .68rem;
                    border-radius: 2px;
                    /*border-color: rgba(255, 184, 203);*/
                }

                .el-input-group__append {
                    border: 0 none;
                    background-color: transparent;
                    padding: 0 .2rem;

                    .el-button {
                        i {
                            font-size: .48rem;
                        }
                    }
                }
            }

            .el-button {
                font-size: .28rem;
            }

            &.avatar {
                .el-form-item__content {
                    border: 0 none;
                }
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .upload {
        position: relative;
        overflow: hidden;
        width: 30vw;
        height: 30vw;
        border-radius: 50%;
        display: inline-block;
        background-color: #fff;
        box-shadow: 0 0 6px -1px rgba(0, 0, 0, .1);

        > div {
            width: 100%;
            height: 100%;
        }

        .el-upload, .uploadimg {
            width: 100%;
            height: 100%;
        }

        .uploadimg {
            padding: .2rem;
            background-color: #eee;
        }

        .img-box {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: transparent;
        }

        .iconClear {
            position: absolute;
            top: 0;
            right: 0;
            width: .72rem;
            height: .72rem;
            line-height: .72rem;
            text-align: center;

            i {
                font-size: .4rem;
                color: #999;
            }
        }
    }

    .upload-tips {
        color: #999;
        margin-top: .05rem;
    }

    .submit {
        display: block;
        width: 100%;
        margin-top: .5rem;
        height: .88rem;
        border-radius: .5rem;
        background-color: #598CDA;
        border-color: #598CDA;
    }
</style>
